<template>
	<view class="tabbar-wrap">
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<view class="tabbar-wrap-item" v-for="(item, i) in list" :key="item.path"  @click="tabbarClick(item, i)">
			<u-image :src="current===i?item.selectedIconPath:item.iconPath" width="24px" height="24px"></u-image>
			<text class="tabbar-wrap-item-text" :class="current===i?'tabbar-wrap-item-text-active':''">{{ item.text }}</text>
		</view>
	</view>
</template>

<script>
	import { DataManager } from '@/base-core'
	import { tabPages, TABBAR_INDEX } from '@/common/constant'
	export default { 
		name:'TabBar',
		props:{
		   theme:{
			   type:String,
			   default: 'dark'
		   },
		   currentIndex: {
			   type:Number,
			   default: 0
		   }
		},
		data() {
			return {
				list: tabPages,
				current: 2
			}
	},
	watch: {
		currentIndex:{
			handler(val){
				this.current = val
			},
			immediate:true
		}
	},
	created() {
		// const current = DataManager.getValue(TABBAR_INDEX) || 0
		// this.current = current
	},
	methods: {
		tabbarClick(item, i) {
			uni.navigateTo({
				url: item.path,
				animationDuration:500,
				animationType:'fade-in'
		 	 })
			DataManager.setValue(TABBAR_INDEX, i)	
		}
	  }
	}
</script>
<style scoped>
.tabbar-wrap{
	z-index: 10000;
	background: #fff;
	position: fixed;
	bottom:0;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	left: 0;
	right: 0;
	padding: 4rpx 0 20rpx;
	
	
}

.tabbar-wrap-item{
	width: 20%;
	text-align: center;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center
}

.tabbar-wrap-item-text{
	font-size: 24rpx;
	color:#aaa
}
.tabbar-wrap-item-text-active{
	font-size: 24rpx;
	color:#333
}
</style>